<div ng-controller="PathwayCtrl as vm">
    <section class="content-header">
        <!-- Content Header (Page header) -->
        <h1>
      Career Pathways Report
      <small></small>
    </h1>
        <ol class="breadcrumb">
            <li>
                <!-- <button class="btn btn-danger btn-xs" ng-click="vm.saveTurnoverLeaderTable()"><i class="fa fa-check-square-o"></i>Submit</button> -->
            </li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Career Pathways</h3>
                <small class="text-warning">{{vm.msg}}</small>
                <button ng-disabled="!vm.editable|| vm.loading" class="btn btn-danger btn-xs pull-right" ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>
            </div>
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <form class="form-inline">
                        <table class="table table-bordered table-condensed">
                            <tr>
                                <th rowspan="2">Department</th>
                                <th >Staff No.</th>
                                <th colspan="2" width="15%">No. of join Career Pathways communication</th>
                                <th colspan="2"  width="15%">No. of Career Pathways E-learning</th>
                                <th colspan="2"  width="15%">No. of HR Functional Competency E-learning</th>
                                <th colspan="2"  width="15%">No. of PDP Setting</th>
                                <th colspan="2"  width="15%">No. of PDP Completion</th>
                            </tr>
                            <tr>
                                <th>Current Month</th>
                                
                                
                                <th>YTD.</th>
                                <th>YTD%</th>

                                
                                <th>YTD.</th>
                                <th>YTD%</th>

                                
                                <th>YTD.</th>
                                <th>YTD%</th>

                                
                                <th>YTD.</th>
                                <th>YTD%</th>

                                
                                <th>YTD.</th>
                                <th>YTD%</th>
                                
                            </tr>
                            <tr ng-repeat="ret in vm.result" >
                                <td>{{ret.area}} </td>
                                <td ng-repeat-start="item in ret.data">
                                    <span ng-if="ret.area=='total'">{{item.ytd}}</span>
                                    <input ng-if="ret.area!='total'" type="text" ng-disabled="!vm.editable" class="number-input" ng-model="item.ytd" ng-change="vm.calculateYtd(item, ret)" /></td>
                                <!-- <td>{{item.ytd}}</td> -->

                                <td ng-repeat-end ng-if="item.type!='staff'">{{item.ytdP | percentage: 2}}</td>

                              <!--   <td>
                                    
                                </td>
                                <td>
                                   {{ret.staff.ytd}}
                                </td>
                            
                               
                                <td>
                                    <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.cpjoin.mtd" ng-change="vm.calculateYtd(ret.cpjoin)" />
                                </td>
                                <td>
                                   {{ret.cpjoin.ytd}}
                                </td>
                                <td>
                                   {{ret.cpjoin.ytdPercent | percentage: 2}}
                                </td>
                               <td>
                                    <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.elearn.mtd" ng-change="vm.calculateYtd(ret.elearn)" />
                                </td>
                                <td>
                                   {{ret.elearn.ytd}}
                                </td>
                                <td>
                                   {{ret.elearn.ytdPercent | percentage: 2}}
                                </td>
                               <td>
                                    <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.pdp.mtd" ng-change="vm.calculateYtd(ret.pdp)" />
                                </td>
                                <td>
                                   {{ret.pdp.ytd}}
                                </td>
                                <td>
                                   {{ret.pdp.ytdPercent | percentage: 2}}
                                </td>
                               <td>
                                    <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.promotion.mtd" ng-change="vm.calculateYtd(ret.promotion)" />
                                </td>
                                <td>
                                   {{ret.promotion.ytd}}
                                </td>
                                <td>
                                   {{ret.promotion.ytdPercent | percentage: 2}}
                                </td>
                               <td>
                                    <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.move.mtd" ng-change="vm.calculateYtd(ret.move)" />
                                </td>
                                <td>
                                   {{ret.move.ytd}}
                                </td>
                                <td>
                                   {{ret.move.ytdPercent | percentage: 2}}
                                </td> -->
                               
                            </tr>
                           
                        </table>
                    </form>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
</div>
</section>
<!-- /.content -->
</div>
